<template>
  <div class="home-container">
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <span>班级学生系统</span>
          <!-- <el-button class="cancel"
                     size="mini"
                     @click='logOut'>注销</el-button> -->
        </div>
        <el-dropdown szie="medium"
                     @command="handleCommand">
          <span class="el-dropdown-link"
                style="color:white">
            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown"
                            style="width:100px">
            <el-dropdown-item command="logOut">退出登录</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container>
        <!-- 左侧区域 -->
        <el-aside :width="'200px'">
          <!-- 折叠菜单区 -->
          <div class="toggle-button">|||</div>
          <!-- 侧边菜单 -->
          <el-menu background-color="#333744"
                   text-color="#fff"
                   active-text-color="#409eff"
                   unique-opened
                   router>
            <template v-for="item in menuList">
              <template>
                <el-menu-item :index='item.index'
                              :key='item.index'>
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.title}}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <!-- 主题区域 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: window.sessionStorage.username,
      menuList: [

        {
          "icon": "iconfont icon-xitongguanli_yonghuguanli",
          "index": "classes",
          "title": "班级管理"
        },
        {
          "icon": "iconfont icon-renxiang",
          "index": "students",
          "title": "学生管理"
        },


      ]
    }
  },
  computed: {


  },
  mounted () {
    //欢迎来到主页
    this.welcomeToHome()
  },
  methods: {
    // 注销退出功能
    logOut () {
      // 清空会话缓存
      window.sessionStorage.clear()
      // 重定向跳转到登录页面
      this.$router.push({ 'name': 'Login' })
    },
    welcomeToHome () {
      this.$notify({
        title: '欢迎来到学生管理系统',
        message: '为北斗打call',
        type: 'success',
        showClose: false,
        offset: 100,
        duration: 2000
      });
    },

    //下拉菜单命令
    handleCommand (command) {
      if (command == 'logOut') {
        //退出
        this.logOut()
        this.$notify({
          title: '注销成功！',
          message: '一个木子yyds',
          type: 'success',
          showClose: false,
          offset: 200,
          duration: 2000
        });
      }
    }


  }
}
</script>

<style lang="sass" scoped>
.el-header
  position: relative
  background-color: #333744
  padding-left: 0
  display: flex
  justify-content: space-between
  align-items: center
  color: #fff
  font-size: 1rem
  div
    display: flex
    align-items: center
    justify-content: space-around
    img
      height: 10%
      width: 10%
      border-radius: 50%

    span
      margin-left: 1rem
      flex: 1

.el-aside
  background-color: #333744
  .toggle-button
    background-color: #4a5064
    font-size: 10px
    line-height: 24px
    text-align: center
    letter-spacing: 0.2em
    color: #fff
    cursor: pointer

.el-main
  background-color: #eaedf1

.home-container
  height: 100%
.avator
  position: absolute
  right: 2rem
  .user-avator
    width: 1.5rem
    height: 1.5rem
    border-radius: 50%
    border: 1px solid #eee
    margin-right: .3rem

    img
      width: 100%
      height: 100%
  .el-dropdown-link
    cursor: pointer
    color: #fff
    .el-icon-arrow-down
      font-size: 12px

.cancel
  margin-left: 1rem
</style>